<template>
  <div class="home">
    <div class="top">
      <el-row :gutter="10">
        <el-col :xs="24" :sm="12" :lg="6">
          <div class="one"></div>
        </el-col>
        <el-col :xs="24" :sm="12" :lg="6">
          <div class="two"></div>
        </el-col>
        <el-col :xs="24" :sm="12" :lg="6">
          <div class="three"></div>
        </el-col>
        <el-col :xs="24" :sm="12" :lg="6">
          <div class="four"></div>
        </el-col>
      </el-row>
    </div>
    <div class="echarts">
      <el-row class="row" :gutter="10">
        <el-col :sm="24" :md="12" class="line">
          <ve-line :data="lineData"></ve-line>
        </el-col>
        <el-col :sm="24" :md="12">
          <ve-pie :data="pieData"></ve-pie>
        </el-col>
      </el-row>
    </div>
    <div class="table">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="name" label="姓名" width="180" align="center"></el-table-column>
        <el-table-column prop="age" label="年龄" width="180" align="center" :sortable="true"></el-table-column>
        <el-table-column prop="date" label="日期" width="180" align="center"></el-table-column>
        <el-table-column prop="address" label="地址" width="220" align="center"></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      lineData: {
        columns: ["日期", "访问用户", "下单用户", "下单率"],
        rows: [
          { 日期: "1/1", 访问用户: 1393, 下单用户: 1093, 下单率: 0.32 },
          { 日期: "1/2", 访问用户: 3530, 下单用户: 3230, 下单率: 0.26 },
          { 日期: "1/3", 访问用户: 2923, 下单用户: 2623, 下单率: 0.76 },
          { 日期: "1/4", 访问用户: 1723, 下单用户: 1423, 下单率: 0.49 },
          { 日期: "1/5", 访问用户: 3792, 下单用户: 3492, 下单率: 0.323 },
          { 日期: "1/6", 访问用户: 4593, 下单用户: 4293, 下单率: 0.78 }
        ]
      },
      pieData: {
        columns: ["日期", "访问用户"],
        rows: [
          { 日期: "1/1", 访问用户: 1393 },
          { 日期: "1/2", 访问用户: 3530 },
          { 日期: "1/3", 访问用户: 2923 },
          { 日期: "1/4", 访问用户: 1723 },
          { 日期: "1/5", 访问用户: 3792 },
          { 日期: "1/6", 访问用户: 4593 }
        ]
      },
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          age: 10,
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          age: 32,
          address: "上海市普陀区金沙江路 1517 弄"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          age: 41,
          address: "上海市普陀区金沙江路 1519 弄"
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          age: 21,
          address: "上海市普陀区金沙江路 1516 弄"
        }
      ]
    };
  },
  methods: {
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    }
  }
};
</script>
<style lang="less" scoped>
.home {
  .top {
    width: 100%;
    height: 100px;
    margin-top: 10px;
    padding: 0 10px;
    box-sizing: border-box;
    .one {
      height: 100px;
      background-color: #adff2f;
      margin: 0px 0px 10px 0px;
    }
    .two {
      height: 100px;
      background-color: #9acd32;
      margin: 0px 0px 10px 0px;
    }
    .three {
      height: 100px;
      background-color: #a52a2a;
      margin: 0px 0px 10px 0px;
    }
    .four {
      height: 100px;
      background-color: #ffc0cb;
      margin: 0px 0px 10px 0px;
    }
  }
  .echarts {
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
    .row {
      width: 100%;
    }
  }
  .table {
    width: 100%;
  }
}
</style>